<template>
  <div class="h-full bg-grey" v-if="ready">
    <van-nav-bar class="bg-red text-white" title="商品" left-arrow @click-left="$router.go(-1)">
      <div slot="right">
        <van-icon @click="handleSubmit()" class="fs-18" name="checked" />
      </div>
      <!-- <router-link tag="div" to="/order/ack/123" >
      </router-link>-->
    </van-nav-bar>
    <!-- 订单信息 -->
    <div class="bg-white p-10 m-10">
      <div class="icon-title p-10 b-b fs-14 text-content">订单信息</div>
      <div class="flex fs-12 text-content p-10 p-v-5 m-t-5">
        <p class="w-80">订单编号</p>
        <p>{{this.number}}</p>
      </div>
      <div class="flex fs-12 text-content p-10 p-v-5">
        <p class="w-80">订单时间</p>
        <p>{{this.time}}</p>
      </div>
    </div>
    <!-- 商品信息 -->
    <div class="bg-white p-10 m-10">
      <div class="icon-title p-10 b-b fs-14 text-content">商品信息</div>
      <van-field class="flex a-center" label="商品名称" v-model="detail.gname" readonly />
      <van-field class="flex a-center" label="商品类型" v-model="detail.gtype" readonly />
      <van-field class="flex a-center" label="门市价" v-model="detail.fprice" type="number">
        <p slot="button">可编辑</p>
      </van-field>
      <van-field
        v-if="detail.yhtype === 1"
        class="flex a-center"
        label="折扣"
        v-model="detail.zk"
        readonly
      >
        <p slot="button">10 = 1.0折</p>
      </van-field>
      <van-field class="flex a-center" label="优惠价" v-model="detail.nprice" readonly />
    </div>
    <!-- 商品信息 -->
    <div class="bg-white p-10 m-10">
      <div class="icon-title p-10 b-b fs-14 text-content">会员信息</div>
      <van-field
        class="flex a-center"
        v-model="phone"
        label="会员手机号"
        placeholder="请输入手机号"
        :error-message="phoneErrorMessage"
        type="number"
      />
      <van-field v-model="sms" type="number" class="m-t-10" placeholder="请输入短信验证码">
        <van-button
          :loading="isSend"
          loading-text="发送中..."
          slot="button"
          class="text-white bg-red b-r-20 b-none"
          size="small"
          :disabled="smsBtn.disabled"
          @click="handleSendMessage()"
        >{{countDown}}</van-button>
      </van-field>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ready: false,
      number: null,
      time: '',
      detail: {},
      sms: '',
      phone: '',
      isSend: false,
      smsBtn: {
        time: 60,
        disabled: false
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.createTime()
      this.getDetail()
    },
    createTime () {
      const addZero = time => time.length <= 1 ? '0' + time : time
      const date = new Date()
      let year = date.getFullYear()
      let month = addZero(date.getMonth() + 1 + '')
      let day = addZero(date.getDay() + '')
      let hours = addZero(date.getHours() + '')
      let minutes = addZero(date.getMinutes() + '')
      let seconds = addZero(date.getSeconds() + '')
      this.number = `${year}${month}${day}************`
      this.time = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
    },
    async getDetail () {
      let { id } = this.$route.params
      let { zxGd } = await this.$api.post('/zxGd/queryById', {
        id
      })
      this.detail = zxGd
      this.ready = true
    },
    async handleSendMessage () {
      if (this.couldSend()) {
        // 0 表示发送成功
        // 2 表示两条短信之间没有超过5分钟
        // 3 表示发送短信接口错误
        // 4 表示参数错误
        // 5 表示没有该用户
        this.isSend = true
        let { message, status } = await this.$api.post('/sendVerifCodeSms', {
          phone: this.phone
        })
        this.isSend = false
        if (status === 0) {
          this.smsBtn.disabled = true
          this.$toast.success(message)
          let timer = setInterval(() => {
            this.smsBtn.time--
            if (this.smsBtn.time === 0) {
              this.smsBtn.time = 60
              this.smsBtn.disabled = false
              clearInterval(timer)
            }
          }, 1000)
        } else {
          this.$toast.fail(message)
        }
      }
    },
    async handleSubmit () {
      if (this.phone && this.sms && this.detail.fprice) {
        let { status, message } = await this.$api.post('/xf/business/add', {
          gid: this.$route.params.id,
          fprice: this.detail.fprice,
          nprice: this.detail.nprice,
          mobile: this.phone,
          verifyCode: this.sms
        })
        if (status === 0) {
          this.$toast.success(message)
          this.$router.push({
            path: `/order/ack/${this.$route.params.id}`
          })
        } else {
          this.$toast.fail(message)
        }
      } else {
        this.$toast('请完善信息')
      }
    },
    couldSend () {
      if (this.phone === '' || this.phoneErrorMessage) {
        this.$toast('请输入正确的手机号')
        return false
      } else {
        return true
      }
    }
  },
  computed: {
    countDown () {
      return this.smsBtn.disabled ? `${this.smsBtn.time}秒` : '发送验证码'
    },
    phoneErrorMessage () {
      if (this.phone) {
        return /^1[3456789]\d{9}$/.test(this.phone) ? '' : '手机号格式不正确'
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-title {
  position: relative;
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 3px;
    height: 15px;
    background: #fa6b4f;
  }
}
.van-nav-bar .van-icon {
  color: #fff !important;
}
.van-nav-bar__title {
  color: #fff !important;
}
.van-hairline--bottom::after {
  border: none;
}
</style>
